import { FC, createContext, useState } from "react";
import Toolbar from "./Toolbar";


export const themes = {
    light: {
        color: 'black',
        background: 'white'
    },
    dark: {
        color: 'white',
        background: 'black'
    }
}

// 定义主题的context
export const ThemesContext = createContext({
    theme: themes.light,
    setTheme: (theme: typeof themes.light) => { },
})

const Demo: FC = () => {

    const [theme, setTheme] = useState(themes.light);
    const toDark = () => {
        setTheme(theme === themes.light ? themes.dark : themes.light)
    }

    return (
        <ThemesContext.Provider value={{ theme, setTheme }}>
            <div>
                <p>Context Demo  <button onClick={toDark}>dark</button></p>
            </div>
            <Toolbar />
        </ThemesContext.Provider>
    )

}

export default Demo;